<template>
   <tr class="cart-item">
                <td class="text-center"><input type="checkbox" @change="changeCheck(item.id,$event)" :checked="item.isChecked"/></td>
                <td class="text-center">
                  <span>
                    <img class="img-rounded pic" :src="item.img" alt="cart">
                    <span>{{item.text}}</span>
                  </span>
                </td>
                <td class="text-center">
                  <span>{{item.price}}</span>
                </td>
                <td class="text-center">
                  <button @click="deleteNum" type="button" class="btn btn-info btn-sm">-</button>

                  <span class="mx-3">{{item.num}}</span>

                  <button @click="addNum" type="button" class="btn btn-info btn-sm">+</button>
                </td>
                <td class="text-center"><span>{{subTotal}}</span></td>
                <td class="text-center ">
                  <button @click="deleteItem" class="btn btn-info">删除</button></td>
              </tr>
</template>

<script>
export default {
    props:['item'],
    data() {
        return{
            
        }     
    },
    methods:{
        deleteNum(){
            this.$bus.$emit('deleteNum',this.item.id)
        },
        addNum(){
           this.$bus.$emit('addNum',this.item.id)
        },
        changeCheck(id,e){
           this.$bus.$emit('changeCheck',this.item.id,e.target.checked)
        },
        deleteItem(){
            this.$bus.$emit('deleteItem',this.item.id)
        }
    },
    computed:{
        subTotal(){
            return (this.item.price * this.item.num).toFixed(2);
        }
    }
   
};
</script>

<style scoped lang="css" scoped>

</style>
